<template>
    <div class="question-form">
        <div class="question-input-area">
            <!-- 图书名  -->
            <div class="question-title-wrap">
                <input class="question-title" placeholder="图书名" maxlength="40" placeholder-style="color:#b3b3b3;font-size:18px;" v-model="bookName">
                <div class="title-input-counter">{{titleCount}}/40</div>
            </div>

            <!-- 内容简介  -->
            <div class="weui-cells weui-cells_after-title">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                <textarea class="weui-textarea" placeholder="请输入图书内容详情。" maxlength="500" placeholder-style="color:#b3b3b3;font-size:14px;" style="height: 12rem" v-model="bookContent"/>
                <div class="weui-textarea-counter">{{contentCount}}/500</div>
                </div>
            </div>
            </div>

        </div>
        <div class="question-images-area">

            <!-- 添加图片按钮  -->
            <div class="question-images-tool">
                <button type="default" size="mini" @click="addImg">添加图片</button>
            </div>

            <!-- 图片缩略图  -->
            <div class="question-images" v-if="tempFilePaths">
                <block >
                    <div class="q-image-wrap">
                    <image class="q-image"  mode="aspectFill" :src="tempFilePaths"></image>
                    <div class="q-image-remover"  @click="removeImage">删除</div>
                    </div>
                </block>
            </div>

        </div>
        <!-- 提交表单按钮  -->
        <button class="weui-btn" type="primary" @click="submit">{{ submitTest }}</button>
        <button class="weui-btn" type="primary" @click="getBack">返回我的页面</button>
    </div>
</template>

<script>
import {request, showSuccess,showModal} from '@/utils'

export default {
    data () {
        return {
            bookName: '',
            bookContent: '',
            tempFilePaths: '',
            submitTest: "提交"
        }
    },
    onShow () {

    },
    methods: {
        async submit () {
            let user = wx.getStorageSync('userInfo');
            // console.log(this.bookName)
            if (!user.openId) {
                showModal('提交失败','请登录')
                return
            } else if (!this.bookName) {
                showModal('提交失败','请输入图书标题')
                return
            } else if (!this.bookContent) {
                showModal('提交失败','请输入图书内容')
                return
            } else if (!this.tempFilePaths) {
                showModal('提交失败','请上传图书图片')
                return
            } else {
                const res = await request('/weapp/addbook', 'POST', {
                    openid: user.openId,
                    title:this.bookName,
                    summary:this.bookContent,
                    image: this.tempFilePaths
                })
                showModal('添加成功',res.title)
                this.submitTest = "继续提交"
                this.bookName = ''
                this.bookContent = ''
                this.tempFilePaths = ''
            }
            
            
        },
        removeImage () {
            this.tempFilePaths = false
        },
        addImg () {
            let _this = this;
            wx.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success(res) {
                    // tempFilePath可以作为img标签的src属性显示图片
                    _this.tempFilePaths = res.tempFilePaths
                }
            })
        },
        getBack () {
            wx.switchTab({
                url: '/pages/me/main',
                
            })
        }
    }
}
</script>

<style>
page {
  background: #f6f7f8;
}

.question-form {
  margin: 25rpx;
}

.question-input-area {
  background-color: #fff;
  border: 1rpx solid #f2f2f2;
  border-radius: 4rpx;
}

.question-title-wrap {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #ccc;
  margin: 10rpx 30rpx;
  padding: 20rpx 0;
}

.question-title {
  flex: 1;
}

.weui-textarea-counter, .title-input-counter {
  color: #b3b3b3;
  font-size: 14px;
  padding-left: 10rpx;
}

.weui-cell::before, .weui-cells::before, .weui-cell::after, .weui-cells::after {
  border: none;
}

.question-images-area {
  padding: 40rpx 0;
}

.question-images-tool {
  display: flex;
  align-items: center;
}

.question-images {
  display: flex;
  align-items: center;
  margin-top: 40rpx;
}

.q-image-wrap {
  width: 31%;
  margin-right: 10rpx;
}

.q-image {
  flex: 1;
  height: 200rpx;
  width: 100%;
}

.q-image-remover {
  text-align: center;
}

</style>
